<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        #q {
            width: 500px;
            height: 30px;
            border: 1px solid #ddd;
            line-height: 30px;
            display: block;
            margin: 0 auto;
            padding: 0 10px;
            font-size: 14px;
        }

        #ul {
            width: 520px;
            list-style: none;
            margin: 0 auto;
            padding: 0;
            border: 1px solid #ddd;
            margin-top: -1px;
            display: none;
        }

        #ul li {
            line-height: 30px;
            padding: 0 10px;
        }

        #ul li:hover {
            background-color: #f60;
            color: #fff;
        }
    </style>
    <script>
        function demo(data){
            console.log(data)
            var ul=document.getElementById("ul");
            var html="";
            if (data.s.length){
                ul.style.display='block';
                for (let i = 0; i < data.s.length; i++) {
                    html+="<li>"+data.s[i]+"</li>";
                }
                ul.innerHTML=html;
            }
        }
        window.onload = function () {
            var Q = document.getElementById("q");
            var Ul = document.getElementById("ul");
            //鼠标抬起事件
            Q.onkeyup = function () {
                if (this.value != "") {
                    var script = document.createElement('script');
                    script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&cb=demo';
                    document.body.appendChild(script);
                }
            }
        }
    </script>
</head>
<body>
<input type="text" id="q">
<ul id="ul"></ul>
</body>
</html>
